<template>
  <!-- 蔗糖减水全光谱 -->
  <div class="space text-center">
    <template v-for="(chart,index) in allStepOneCharts" >
      <wave-chart 
        :key="index" 
        :id="id+index"
        :data='chart'
        @shotImg="shotImg">
      </wave-chart>
    </template>
  </div>
  <!-- 使用方法
  <Saccharose 
    :originalData="originalData" 
    :title="$t('page.fullSpect')"
    @showImg="shotImg"
    :resultValue="resultValue">
  </Saccharose> -->
</template>

<script>
import waveChart from '@/components/WaveChart'
import { COLORLIST } from '@/utils/variate'
export default {
  components: {
    waveChart
  },
  props: {
    // 后端返回的计算数组
    originalData: {
      type: Object,
      default: () => {}
    },
    // 返回的类型
    dissType: {
      type: String,
      default: 'v2'
    },
    // 后端返回提交的数据用于前端使用
    resultValue: {
      type: Object,
      default: () => {}
    },
    // echarts的标题
    title: {
      type: String,
      default: ''
    },
    // DOM-Id
    id: {
      type: String,
      default: '',
      required: true
    },
    sprone_dissociation: {
      type: Array,
      default: () => [0, 0]
    }
    // 浓度列表
    // waveName: {
    //   type: Array,
    //   default: () => []
    // },
    // 后端返回用于计算中心线
    // dissociation: {
    //   type: Array,
    //   default: () => []
    // },
  },
  watch: {
    originalData: {
      handler(value) {
        this.$nextTick(() => {
          this.allStepOneCharts = []
          for (const k in value) {
            if (k !== 'time') {
              this.waveName.push(k)
            }
          }
          this.newDrawChart()
        })
      },
      deep: true,
      // immediate: true
    }
  },
  data() {
    return {
      allStepOneCharts: [], // 线形图数据列表
      tooltipList: [], // 线形图tooltip需要的数据
      waveName: []
    }
  },
  methods: {
    newDrawChart() {
      let chartsOption = {
          // 设置title
          title: {
            text: this.title,
          },
          // 是否使用动画
          animation: false,
          // 提示弹窗
          tooltip: {
            trigger: 'axis',
          },
          color: COLORLIST,
          /*  数据数组, 如果 data 没有被指定，会自动从当前系列中获取。
              多数系列会取自 series.name 或者 series.encode */ 
          legend: {
            type: 'scroll',
            orient: 'vertical',
            align: 'left',
            right: '20',
            top: '60',
            data: this.waveName,
            icon: 'circle',
            width: "80%",
            textStyle: {
              fontSize: 20
            },
          },
          // echarts 显示位置
          grid: {
            left: '3%',
            right: '13%',
            bottom: '15%',
            containLabel: true, // 是否展示轴刻度
          },
          // 滑动条型数据区域缩放组件
          dataZoom: [
            {
              type: 'inside',  // 类型，
              xAxisIndex: 0,   // 控制哪个轴
              height: 15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              // filterMode: 'none',  // 数据过滤模式，放大缩小
            }, 
            {
              type: 'inside',
              yAxisIndex: 0,
              width:  15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              // filterMode: 'none',
            },
          ],
          // 是否可以下载图片
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          // x轴配置
          xAxis: {
            type: 'value',  // 类目轴
            minorTick: {
              show: true,
            },
            axisLine: {
              onZero: false,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontWeight: 700,
                color: "#4c4c4c",
                fontSize: 20,
              },
            },
            splitLine: {
              show: false,
            },
            boundaryGap: true, // 是否显示刻度
            // minInterval: 120,   // 自动计算的坐标轴最小间隔大小
            // data: [],   // x轴数据
          },
          // y轴 类型数值轴
          yAxis: {
            type: 'value',   
            splitNumber: 5,
          },
          series: [],  // 数据
          markLine: {},  
      }
      chartsOption.series = []
      // chartsOption.xAxis.data = []
      let num = 0
      const dataLines = this.setLinsttypeData(this.originalData)
      for (const key in dataLines) {

        let chartSeries = {
          name: this.waveName[num],  // tootip 提示展示
          type: 'line',   // 线型
          // smooth: true,  // 平滑曲线显示
          showSymbol: false,  // hover是否展示symbol
          hoverAnimation: true, // 是否开启 hover 在 box 上的动画效果。
          data: dataLines[key],   // 每个数组对应一天线型，跟xAxis对应
          // 每根线的颜色
          lineStyle: {
            normal: {
              width: 2.2,
              color: COLORLIST[num],
            }
          },
          markLine: {
            symbol: 'none',  // 标线两端的标记类型
            lineStyle: {     // 标线的样式
              width: 2.2, 
              normal: {
                color: '#000',
              },
            },
            data: [
              {
                xAxis: this.sprone_dissociation[0] >= 0 ? this.sprone_dissociation[0] : '',
              },
              {
                xAxis: this.sprone_dissociation[1] ? this.sprone_dissociation[1] : '',
              }
            ],
            // label: {
            //   normal: {
            //     formatter: this.dissociation[0],
            //   },
            // },
          },
        }
        // 展示数据
        chartsOption.series.push(chartSeries)
        num++
      }

      this.allStepOneCharts.push(chartsOption)
    },
    setLinsttypeData(lines) {
      const maxValue = Math.max(...(Object.values(lines).map(item => item.length)))
      let xAxisList = Array.from({ length: maxValue }, (_, i) => i)
      let result = {}
      for (const k in lines) {
        result[k] = xAxisList.map((item, index) => {
          return [item, lines[k][index]]
        })
      }
      return result
    },

    // 返回生成图片base64
    shotImg(url) {
      this.$emit('showImg', url)
    }
  }
}
</script>

<style>

</style>